<template>
  <div>
    <hsa-adaptive-container>
      <hsa-adaptive-pane>
        <hsa-title-pane>
          <hsa-title-pane-item
            title="查询条件"
          >
            <t-query-condition
              :opts="opts"
              @submit="conditionEnter"
              @handleEvent="handleEvent"
              isExpansion
            />
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <hsa-adaptive-pane autoHeight>
        <hsa-title-pane>
          <hsa-title-pane-item
            title="报表信息"
          >
            <template #toolbar>
              <el-button type="primary" @click="addReport">新建</el-button>
            </template>
            <div>
              <t-table
                :table="table"
                :columns="table.columns"
                :tableLoading="tableLoading"
                @page-change="pageChange"
                @size-change="sizeChange"
                isPaginationCumulative
              />
            </div>
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
    </hsa-adaptive-container>
  </div>
</template>
<script setup lang="ts">
// import hsaAdaptiveContainer from '@/components/hsa/adaptive/container.vue'
// import hsaAdaptivePane from '@/components/hsa/adaptive/pane.vue'
// import HasTitle from "@/components/hsa/title-box.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from 'vue-router'
import apiAxios from "@/api/SelfAnalysis/analysis-template-manage";
import { PAth } from "@/api/SelfAnalysis/query";
const router = useRouter()
const queryFrom = ref(PAth());
const tableLoading = ref<boolean>(false)
const addReport = () => {
  router.push('/self-analysis/report-config')
};
const edit = val => {
  router.push({path:'/self-analysis/report-config',query:{id:val.id}})
}
const del = val => {
  console.log("nullify", val)
  ElMessageBox.confirm(`确认删除？`, "提示").then(async () => {
    try {
      let res = await apiAxios.dataDel(val.id);
      if (res) {
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
        getData();
      }
    } catch (err) {
      ElMessage({
        message: "删除失败",
        type: "error",
        showClose: false,
      });
    }
  });
}
const table = ref<TableTypes.Table>({
  firstColumn: { type: "index", width: 80, fixed: true },
  total: 20,
  currentPage: 1,
  pageSize: 10,
  layout: "total,sizes, slot, prev, pager, next, jumper",
  prevText: "上一页",
  nextText: "下一页",
  // 接口返回数据
  data: [],
  // 表头数据
  columns: [
    { prop: "name", label: "模版名称" },
    { prop: "source", label: "所属类型",
      render: (text, record) => {
        let val = "";
        switch (record.source) {
          case "0":
            val = "我创建的";
            break;
          case "1":
            val = "我团队创建的";
            break;
          case "2":
            val = "分享给我的";
            break;
        }
        return val;
      },
     },
    { prop: "createTime", label: "创建时间" },
  ],
  // 表格内操作列
  operator: [
    {
      text: "编辑",
      fun: edit
    },
    {
      text: "删除",
      fun: del,
      bind: {
        type: 'danger',
        text: true
      }
    }
  ],
  // 操作列样式
  operatorConfig: {
    // fixed: "right", // 固定列表右边（left则固定在左边）
    width: 200,
    label: "操作"
  }
});
let state = reactive({
  listTypeInfo: {
    sexList: [
      {
        label: "我创建的",
        key: "0",
      },
      {
        label: "我团队创建的",
        key: "1",
      },
      {
        label: "分享给我的",
        key: "2",
      },
    ],
  },
});
const opts = computed(() => {
  return {
    name: {
      label: "模版名称",
      comp: "el-input",
    },
    source: {
      label: "所属类型",
      comp: "el-select",
      changeEvent: "change",
      type: "select-arr",
      list: "sexList",
      listTypeInfo: state.listTypeInfo,
    },
  };
});

onMounted(() => {
  getData();
});
const getData = async () => {
  tableLoading.value = true
  let res;
  let obj = {
    ...queryFrom.value,
    pageNumber: table.value.currentPage,
    pageSize: table.value.pageSize,
  };
  res = await apiAxios.getQueryList(obj);
  tableLoading.value = false
  if (res) {
    table.value.total = res.total;
    table.value.data = res.records;
  }
};
// 查询条件change事件
const handleEvent = (type, val) => {
  // console.log(111, type, val)
  switch (type) {
    case "date":
      console.log("获取event==date的数据", val);
      break;
  }
};
// 点击查询按钮
const conditionEnter = (data: any) => {
  for (const key in data) {
    if (data[key] == null || data[key] == "") {
      data[key] = undefined;
    }
  }
  queryFrom.value = data;
  getData();
};
// 选择当前页码
const pageChange = (page) => {
  console.log("选择当前页码", page);
  table.value.currentPage = page;
  getData()
};
// 选择当页条数
const sizeChange = (size) => {
  console.log("选择当页条数", size);
  table.value.currentPage = 1;
  table.value.pageSize = size;
  getData()
};
</script>

<style lang="scss" scoped>
</style>
